<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>单笔转账</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .input-container {
            display: flex;
        }

        .input-container input {
            flex: 1;
            margin-right: 0px;
        }

        tr td:nth-child(1),
        tr td:nth-child(3) {
            background-color: #E8EAED; /* 设置背景颜色 */
        }

    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="form-initPlat" id="userForm" method="post"
          style="margin-bottom: 80px">
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label"  style="text-align: left">查询条件：</label>
                <div class="layui-input-block">
                    <input type="text" name="companyNo" required lay-verify="required" placeholder="请输入输待查账号"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" required lay-verify="required" name="endBeginDate" id="dateRange" placeholder="请选择查询时间范围" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="post-initPlat">查询</button>
            </div>
        </div>
        <table class="layui-table" style="border:1px solid cornsilk">
            <colgroup>
                <col width="100">
                <col width="250">
                <col width="100">
                <col width="250">
            </colgroup>
            <tbody>
            <tr>
                <td>笔数</td>
                <td id="count">无数据</td>
                <td>账号</td>
                <td id="acNo">无数据</td>
            </tr>
            <tr>
                <td>客户中文名</td>
                <td id="cifName">无数据</td>
                <td>货币</td>
                <td id="currencyNo">无数据</td>
            </tr>
            <tr>
                <td>转出标识</td>
                <td id="def_agreement">无数据</td>
            </tr>
            </tbody>
        </table>
        <table id="tabel" lay-filter="test"></table>
    </form>
</div>


<script src="../../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'laydate','table', 'form'], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, element = layui.element, laydate = layui.laydate,table = layui.table;
        element.render('icon');
        // 初始化时间范围选择器
        laydate.render({
            elem: '#dateRange',
            range: true,
            format: 'yyyy/MM/dd' // 使用斜杠作为时间分隔符
        });
        dataPage([])
        function getLoanFlags(d){
            if(d==null||d==="")return "无数据";
            if(String(d['LoanFlag'])==="0"){
                return  "借/收"
            }else if(String(d['LoanFlag'])==="1"){
                return "贷/付"
            }else{
                return d['LoanFlag']
            }
        }
        function dataPage(dataPages){
            table.render({
                elem: '#tabel'
                ,height: 312
                ,data:dataPages
                ,page: true //开启分页
                ,limits:[10,20,50,100,200]
                ,cols: [[ //表头
                    {field: 'TrsDt', title: '交易日期',width:120}
                    ,{field: 'LoanFlag', title: '借贷标记',width:120,templet: function(d) {return getLoanFlags(d)}}
                    ,{field: 'TrsAmt', title: '交易金额',width:120}
                    ,{field: 'AvaliBal', title: '账户余额',width:120}
                    ,{field: 'AbstractNo', title: '摘要代码',width:120}
                    ,{field: 'CertNo', title: '企业自制凭证号',width:120}
                    ,{field: 'CifAc', title: '客户账号',width:120}
                    ,{field: 'TrsTeller', title: '交易柜员',width:120}
                    ,{field: 'AuthorizTel', title: '授权柜员',width:120}
                    ,{field: 'SBST', title: '摘要'}
                ]]
            });
        }
        //上传完毕 提交表单
        form.render(null, 'form-initPlat');
        form.on('submit(post-initPlat)', function (data) {
            const  endBeginDate=data.field.endBeginDate.split("-");
            const beginDate=endBeginDate[0].replaceAll("/","-");
            const endDate=endBeginDate[1].replaceAll("/","-");
            admin.req({
                url: "/platform/cmbc/depositAccountDetail",
                data: {companyNo:data.field.companyNo,beginDate:beginDate,endDate:endDate},
                type: 'post',
                done: function (res) {
                    const  data=res.data;
                    document.getElementById('count').innerHTML=data['Count'];
                    document.getElementById('acNo').innerHTML=data['AcNo'];
                    document.getElementById('currencyNo').innerHTML=data['CurrencyNo']??"人民币";
                    document.getElementById('cifName').innerHTML=data['CifName'];
                    document.getElementById('def_agreement').innerHTML=data['def_agreement'];
                    if(data['List']['Map']==null)return;
                    dataPage(data['List']['Map'])
                }
            });
            return false;
        });

    });
</script>
</body>
</html>